<!-- 负荷详情 -->
<template>
  <div class="loadDetails">
    <div class="operate card">
      <p class="now_time">{{now_time}}</p>
      <!-- <div>时间区间:</div> -->
      <div>
        <el-date-picker style="width:180px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions" placeholder="选择日期时间"></el-date-picker>
      </div>
      <div class="hidden-xs-only">
        <i class="el-icon-minus"></i>
      </div>
      <div>
        <el-tooltip content="查询时间跨度最大为72小时" placement="top">
          <el-date-picker style="width:180px" v-model="e_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions" placeholder="选择日期时间"></el-date-picker>
        </el-tooltip>
      </div>
      <!-- <div>选择车间:</div> -->
      <div>
        <el-select style="width:250px" v-model="Workshop_value">
          <el-option v-for="item in Workshop" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" :disabled="!Workshop_value" @click="t_button">查询</el-button>
      </div>
    </div>
    <el-row class="card" :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="电力系统-功率曲线">
          <el-popover popper-class="popper-class" placement="bottom-start" style="right:100px" transition="el-zoom-in-center" width trigger="click">
            <el-badge slot="reference">
              <i style="font-size:16px;color:#0780ed" class="icon iconfont icon-dianji">用电情况</i>
            </el-badge>
            <div class="popover_content">
              <div class="left">
                <p>实时功率
                  <br>
                  <span>{{electricRealTimePower_01}} kw</span>
                </p>
                <p>当前区间总用电量
                  <br>
                  <span>{{electric24HourTotalPower_01}} kWh</span>
                </p>
              </div>
              <div class="right">
                <p>功率分布图</p>
                <ecpie style="height:270px;width:450px" unit="kW" :ecdata="devicePowerDtos_01" width="100%" height="100%"></ecpie>
              </div>
            </div>
          </el-popover>
        </Mtitle>
        <ecline v-no-data="ecline_data_01_no_data" v-loading="ecline_loading_01" style="height:400px" unit="kW" :ecdata="ecline_data_01" width="100%" height="100%"></ecline>
      </el-col>
    </el-row>
    <el-row class="card" :gutter="0" v-if="show_view">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <Mtitle title="蒸汽系统-负荷曲线">
          <el-popover popper-class="popper-class" placement="bottom-start" style="right:100px" transition="el-zoom-in-center" width trigger="click">
            <el-badge slot="reference">
              <i style="font-size:16px;color:#0780ed" class="icon iconfont icon-dianji">用汽情况</i>
            </el-badge>
            <div class="popover_content">
              <div class="left">
                <p>实时瞬时流量
                  <br>
                  <span>{{electricRealTimePower_02}} t/h</span>
                </p>
                <p>当前区间总用汽量
                  <br>
                  <span>{{electric24HourTotalPower_02}} t</span>
                </p>
              </div>
              <div class="right">
                <p>流量分布图</p>
                <ecpie style="height:200px;width:450px" unit="t/h" :ecdata="devicePowerDtos_02" width="100%" height="100%"></ecpie>
              </div>
            </div>
          </el-popover>
        </Mtitle>
        <div style="height:400px" v-show="div0" v-loading="ec_00_data_loading">
          <p style="text-align:center;font-size:16px;margin-top:10px">瞬时流量{{ec_00_data_value}}</p>
          <ecline style="height:378px" unit="t/h" :ecdata="ec_00_data" width="100%" height="100%"></ecline>
        </div>
        <div style="height:400px" v-show="div1" v-loading="ec_01_data_loading">
          <p style="text-align:center;font-size:16px;margin-top:10px">压力{{ec_01_data_value}}</p>
          <ecline style="height:378px" unit="t/h" :ecdata="ec_01_data" width="100%" height="100%"></ecline>
        </div>
        <div style="height:400px" v-show="div2" v-loading="ec_02_data_loading">
          <p style="text-align:center;font-size:16px;margin-top:10px">温度{{ec_02_data_value}}</p>
          <ecline style="height:378px" unit="t/h" :ecdata="ec_02_data" width="100%" height="100%"></ecline>
        </div>
        <!-- <p style="text-align:center;font-size:16px;margin-top:10px" v-if='div0'>瞬时流量{{ec_00_data_value}}</p>
          
              <ecline  v-if="div0" style="height:300px" unit='t/h'  :ecdata='ec_00_data' width='100%' height='100%'></ecline>
              <p style="text-align:center;font-size:16px;margin-top:10px" v-if='div1'>压力{{ec_01_data_value}}</p>
              
              <ecline  v-if="div1" style="height:300px" unit='t/h'  :ecdata='ec_01_data' width='100%' height='100%'></ecline>
              <p style="text-align:center;font-size:16px;margin-top:10px" v-if='div2'>温度{{ec_02_data_value}}</p>
              
        <ecline  v-if="div2" style="height:300px" unit='t/h'  :ecdata='ec_02_data' width='100%' height='100%'></ecline>-->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import e from '@/utils/echarts_fuhe.js'
import day from "@/utils/day.js";
import dayjs from 'dayjs'
import Mtitle from '@/components/Mtitle'
import ecline from '@/components/echarts/ec_line'
import ecpie from '@/components/echarts/ec_pie_2'
import tb from '@/components/table'
import './index.scss'
export default {
  components: {
    Mtitle,
    tb,
    ecline,
    ecpie
  },
  watch: {
  },
  data() {
    return {
      ec_00_data_loading: true,
      ec_01_data_loading: true,
      ec_02_data_loading: true,
      ecline_data_01_no_data: false,
      chart0: '',
      chart1: '',
      chart2: '',
      div0: false,
      div1: false,
      div2: false,
      ec_00_data: [],
      ec_00_data_value: '',
      ec_01_data: [],
      ec_01_data_value: '',
      ec_02_data: [],
      ec_02_data_value: '',
      color: ['#CC0000', '#0066CC', '#00CCCC', '#990066', '#ea9914', '#e7600e', '#006633', '#ADCB13', '#0099FF', '#FFCC33', '#D39188', '#5c2a69', '#5DB85E', '#C40082', '#FF3703', '#D5353F', '#B699BD', '#a02024', '#dd6a24', '#cc3736'],
      now_time: '',
      show_view: false,
      export_ProductionLine_value: '',
      ecline_loading_01: true,
      ecline_data_01: [],
      ecline_loading_02: true,
      ecline_data_02: [],
      Workshop: [],
      Workshop_value: "",
      ProductionLine_Workshop_value: 1,
      s_time: "",
      e_time: "",
      // 初始日期格式
      v_type: "yyyy-MM-dd HH:mm",
      // 初始显示类型
      d_type: "datetime",
      // 日   月  年 
      t_value: 1,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      electricRealTimePower_01: '--',
      electric24HourTotalPower_01: '--',
      devicePowerDtos_01: [],
      electricRealTimePower_02: '--',
      electric24HourTotalPower_02: '--',
      devicePowerDtos_02: [],
    };
  },
  mounted() {
  },
  created() {
    // 初始化默认时间
    this.s_time = dayjs().subtract(6, 'hours').format('YYYY-MM-DD HH:mm')
    this.e_time = this.now_time = dayjs().format('YYYY-MM-DD HH:mm');
    // //获取下拉信息
    this.getqueryProductionDepartment();
  },
  methods: {
    //获取下拉信息
    getqueryProductionDepartment() {
      var fd = new FormData();
      fd.append("companyId", sessionStorage.getItem("custId"));
      this.$axios
        .post(this.Eelec + "/web/produce/queryProductionDepartment", fd)
        .then(res => {
          if (res.data.code === 200) {
            if (res.data.data && res.data.data.length) {
              this.Workshop = res.data.data;
              this.Workshop_value = res.data.data[0].id;
              this.handleReuse()
            } else {
              this.ecline_data_01_no_data = true
              this.ecline_loading_01 = false
            }

          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleReuse() {
      //电力系统-功率曲线
      this.getqueryPowerCurveForWebElectricSystem();
      // //蒸汽系统-负荷曲线
      this.getqueryFlowCurveForWebThermodynamicSystem();
      ////实时用电情况
      this.getqueryRealTimeElectricityStatus();
    },
    //查询实时用汽情况
    getqueryRealTimeStreamStatus() {
      this.$axios
        .post(this.Eelec + "/web/produce/queryRealTimeStreamStatus", {
          companyId: sessionStorage.getItem("custId"),
          departmentId: this.Workshop_value,
          sampleCurrentTime: this.e_time + ":00",
          sampleStartTime: this.s_time + ":00"
        })
        .then(res => {
          if (res.data.code === 200) {
            this.devicePowerDtos_02 = res.data.data.devicePowerDtos;
            this.electric24HourTotalPower_02 = res.data.data.stream24HourTotalPower;
            this.electricRealTimePower_02 = res.data.data.streamRealTimePower;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //实时用电情况
    getqueryRealTimeElectricityStatus() {
      this.$axios
        .post(this.Eelec + "/web/produce/queryRealTimeElectricityStatus", {
          companyId: sessionStorage.getItem("custId"),
          departmentId: this.Workshop_value,
          sampleCurrentTime: this.e_time + ":00",
          sampleStartTime: this.s_time + ":00"
        })
        .then(res => {
          if (res.data.code === 200) {
            this.devicePowerDtos_01 = res.data.data.devicePowerDtos;
            this.electric24HourTotalPower_01 = res.data.data.electric24HourTotalPower;
            this.electricRealTimePower_01 = res.data.data.electricRealTimePower;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //蒸汽系统-负荷曲线    
    getqueryFlowCurveForWebThermodynamicSystem() {
      this.ec_00_data_loading = true
      this.ec_01_data_loading = true
      this.ec_02_data_loading = true
      this.$axios
        .post(
          this.Eelec + "/web/produce/queryFlowCurveForWebThermodynamicSystem",
          {
            companyId: sessionStorage.getItem("custId"),
            departmentId: this.Workshop_value,
            sampleCurrentTime: this.e_time + ":00",
            sampleStartTime: this.s_time + ":00"
          }
        )
        .then(res => {
          if (res.data.code === 200) {
            let array = Object.keys(res.data.data).map(key => res.data.data[key])
            if (array[0] === null && array[1] === null && array[1] === null) {
              this.show_view = false
            } else {
              this.show_view = true
              // //查询实时用汽情况
              this.getqueryRealTimeStreamStatus();

            }
            if (array[0].list.length) {
              this.div0 = true
              this.ec_00_data_loading = false

              this.ec_00_data = array[0].list.map((item, index) => {
                return {
                  name: item.equipName,
                  value: item.dataResp
                }
              })
              // this.div0 = true
              // this.$nextTick(() => {
              //   this.chart0 = echarts.init(document.getElementById('ec0'));
              //   this.chart0.setOption(e(this, 'ec_00_data', '%'))
              // })
            }
            if (array[1].list.length) {
              this.div1 = true
              this.ec_01_data_loading = false
              this.ec_01_data = array[1].list.map((item, index) => {
                return {
                  name: item.equipName,
                  value: item.dataResp
                }
              })
              // this.div1 = true
              // this.$nextTick(() => {
              //   this.chart1 = echarts.init(document.getElementById('ec1'));
              //   this.chart1.setOption(e(this, 'ec_01_data', '%'))
              // })
            }
            if (array[2].list.length) {
              this.div2 = true
              this.ec_02_data_loading = false
              this.ec_02_data = array[2].list.map((item, index) => {
                return {
                  name: item.equipName,
                  value: item.dataResp
                }
              })
              // this.div2 = true
              // this.$nextTick(() => {
              //   this.chart2 = echarts.init(document.getElementById('ec2'));
              //   this.chart2.setOption(e(this, 'ec_02_data', '%'))
              // })
              // echarts.connect([this.chart0, this.chart1, this.chart2])
            }
            // console.log(array)
            // if (array[i].list) {
            //   this.data_type_name = data_type_name[i]
            //   this.ecline_data_02 = array[i].list.map((item, index) => {
            //     return {
            //       name: item.equipName,
            //       value: item.dataResp
            //     }
            //   })
            // } else {
            //   this.ecline_data_02 = []
            // }

          }
        })
        .catch(err => {
          // console.log(err);
        });
    },
    ////电力系统-功率曲线
    getqueryPowerCurveForWebElectricSystem() {
      this.$axios
        .post(this.Eelec + "/web/produce/queryPowerCurveForWebElectricSystem", {
          companyId: sessionStorage.getItem("custId"),
          departmentId: this.Workshop_value,
          sampleCurrentTime: this.e_time + ":00",
          sampleStartTime: this.s_time + ":00"
        })
        .then(res => {
          if (res.data.code === 200) {
            this.ecline_loading_01 = false
            if (res.data.data.electricSampleData && res.data.data.electricSampleData.list.length) {
              this.ecline_data_01_no_data = false
              this.ecline_data_01 = res.data.data.electricSampleData.list.map((item, index) => {
                return {
                  name: item.equipName,
                  value: item.dataResp
                }
              })

            } else {
              this.ecline_data_01_no_data = true
              this.ecline_data_01 = []
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击查询
    t_button() {
      day
        .s_e(this.s_time, this.e_time, 'month72')
        .then(() => {
          this.now_time = dayjs().format('YYYY-MM-DD HH:mm');
          this.ecline_loading_01 = true
          this.handleReuse()
        })
        .catch(() => { });
    }
  }
};
</script>
 <style scoped lang='scss'>
.operate {
  position: relative;
  .now_time {
    position: absolute;
    right: 10px;
    top: -37px;
    font-size: 16px;
  }
}
.module_title {
  .icon-dianji {
    height: 62px;
    line-height: 62px;
    display: inline-block;
  }
}

.popover_content {
  display: flex !important;
  padding: 20px;
  div {
    flex: 1;
  }
  .left {
    padding-right: 50px;
    padding-left: 30px;
    border-right: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .right {
    padding-left: 20px;
  }
}
.el-popover {
  right: 100px !important;
}
.popper-class {
  right: 100px !important;
}
</style>
